<template>
  <div class="index-videos" v-loading="isFetchingVideos" element-loading-text="正在加载中~">
    <div class="video-grid">
      <el-carousel class="carousel-box" height="100%">
        <el-carousel-item class="carousel-item" v-for="item in carouselItems" :key="item"
          @click="goExternalLink(item.aUrl)"
        >
          <img :src="item.ImgUrl" alt="">
          <h3 class="carousel-item-h3">{{ item.Title }}</h3>
        </el-carousel-item>
      </el-carousel>
      <VideoCard
        v-infinite-scroll="handleInfiniteScroll" :infinite-scroll-disabled="pageNum>=pageTotalNum || totalNum <=1 "
        v-for="video in videos"
        :key="video.id"
        :video="video"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {useRouter} from 'vue-router'
import VideoCard from './VideoCard.vue'
import { TestVideos } from '../const.js'
import VideoApi from "@/apis/VideoApi.js";

const router = useRouter();

const videos = ref([]);
const isFetchingVideos = ref(false)

// 分页pageNum
const pageNum = ref(1)
const pageTotalNum = ref(1)
const totalNum = ref(1)

const carouselItems = ref([
  {
    ImgUrl:'/上海大学2025.jpg',
    Title:'上海大学2025',
    aUrl:"https://www.shu.edu.cn/",
  },
  {
    ImgUrl:"https://lib.shu.edu.cn/images/lunxian_20241011_0.jpg",
    Title:'上海大学图书馆',
    aUrl:"https://lib.shu.edu.cn/",
  },
  {
    ImgUrl:"https://bkzsw.shu.edu.cn/images/baokaozhinan.jpg",
    Title:'',
    aUrl:"https://bkzsw.shu.edu.cn/",
  },
])

const goExternalLink = (link) => {
  window.location.href= link;
}

//无限滚动请求
const handleInfiniteScroll = ()=>{
  fetchVideos(pageNum.value)
}

//获取首页视频
async function fetchVideos() {
  try {
    const res = await VideoApi.fetchAllVideo(30,pageNum.value);
    videos.value= [...videos.value,...res.data.videos];
    pageNum.value = pageNum.value+1;
    pageTotalNum.value = res.data.Page_total_size;
    totalNum.value = res.data.comment_total_num;
  } catch (error) {
    console.error('Failed to fetch videos:', error)
  }
}

onMounted(async () => {
  isFetchingVideos.value = true;
  await fetchVideos()
  isFetchingVideos.value = false;
})


</script>

<style lang="less" scoped>
.index-videos {
  padding: 20px 10%;
  min-height: 100vh; // 确保有足够的滚动空间
  width: 100%;

  .video-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;

    .carousel-box {
      grid-column: span 2; // 占据 2 列
      grid-row: span 2;    // 占据 2 行
      margin-bottom: 62px;
      position: relative;
      border-radius: 5px;

      .carousel-item{
        .carousel-item-h3{
          position: absolute;
          bottom: 25px;
          left: 15px;
          color: white;
          font-size: 25px;
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }


    }

    @media screen and (max-width: 1854px) {
      grid-template-columns: repeat(4, 1fr);
    }

    @media screen and (max-width: 1334px) {
      grid-template-columns: repeat(3, 1fr);
    }

  }
}
</style>
